Angular Material এ MatToolbar কম্পোনেন্ট ব্যবহার করে আপনি একটি আধুনিক এবং রেসপন্সিভ টুলবার তৈরি করতে পারেন। টুলবার সাধারণত একটি অ্যাপ্লিকেশনের শীর্ষ অংশে থাকে এবং এটি নেভিগেশন, অ্যাপ্লিকেশন তথ্য, বা অন্যান্য কন্ট্রোল উপাদান ধারণ করে।

Angular Material এর MatToolbar কম্পোনেন্ট Material Design গাইডলাইন অনুসরণ করে এবং বিভিন্ন স্ক্রীন সাইজে রেসপন্সিভ এবং কাস্টমাইজযোগ্য টুলবার তৈরি করতে সহায়তা করে।

MatToolbar কম্পোনেন্ট ব্যবহার করা

১. MatToolbar মডিউল ইমপোর্ট করা

প্রথমে MatToolbarModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা হয়।

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  imports: [
    MatToolbarModule
  ]
})
export class AppModule { }

২. MatToolbar ব্যবহার করা

এখন HTML ফাইলে mat-toolbar কম্পোনেন্ট ব্যবহার করে টুলবার তৈরি করা যায়।

<mat-toolbar color="primary">
  <span>My Application</span>
</mat-toolbar>

এখানে:

• mat-toolbar: এটি টুলবার কম্পোনেন্ট।
• color="primary": টুলবারের রঙ সেট করা হয়েছে primary (যা Angular Material থিমের অংশ)।
• <span>: টুলবারের মধ্যে টেক্সট বা অন্য কন্টেন্ট প্রদর্শন।

MatToolbar এর বৈশিষ্ট্য

১. রঙ কনফিগারেশন

Angular Material এর টুলবারে বিভিন্ন রঙ কনফিগার করা যায়, যেমন primary, accent, এবং warn রঙ, যা Material Design এর রঙ প্যালেট অনুসরণ করে।

<mat-toolbar color="accent">
  <span>My Application</span>
</mat-toolbar>

এছাড়া, আপনি কাস্টম রঙও ব্যবহার করতে পারেন যদি আপনার থিম কাস্টমাইজ করা থাকে।

২. টুলবারে আইকন এবং বাটন যোগ করা

টুলবারে MatIcon এবং MatButton কম্পোনেন্ট যোগ করা যায়, যা টুলবারে বিভিন্ন কন্ট্রোল উপাদান যেমন বাটন, আইকন ইত্যাদি প্রদর্শন করতে ব্যবহৃত হয়।

<mat-toolbar color="primary">
  <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>My Application</span>
  <button mat-button>Login</button>
</mat-toolbar>

এখানে:

• mat-icon-button: এটি একটি আইকন বাটন তৈরি করে।
• mat-icon: এটি একটি ম্যাটেরিয়াল ডিজাইন আইকন প্রদর্শন করে (যেমন menu বা home আইকন)।
• mat-button: এটি একটি সাধারণ বাটন তৈরি করে।

৩. টুলবারে নেভিগেশন লিংক

আপনি টুলবারে বিভিন্ন নেভিগেশন লিংকও যোগ করতে পারেন। সাধারণত RouterLink ব্যবহার করা হয় Angular রাউটিং সিস্টেমে নেভিগেশন করার জন্য।

<mat-toolbar color="primary">
  <span>My Application</span>
  <span class="spacer"></span>
  <a mat-button routerLink="/home">Home</a>
  <a mat-button routerLink="/about">About</a>
</mat-toolbar>

এখানে:

• routerLink: এটি Angular এর রাউটিং সিস্টেমের মাধ্যমে লিঙ্কিং করতে ব্যবহৃত হয়।

৪. টুলবারে ফ্লেক্সবক্স এবং স্পেস

টুলবারে এলিমেন্টের অবস্থান নিয়ন্ত্রণ করতে Flexbox ব্যবহার করা হয়। mat-toolbar-row এর মধ্যে এলিমেন্টগুলো সাজানো যায় এবং spacer ক্লাস ব্যবহার করে স্পেস যুক্ত করা যায়।

<mat-toolbar color="primary">
  <span>My Application</span>
  <span class="spacer"></span>
  <button mat-button>Login</button>
</mat-toolbar>

এখানে:

• .spacer: এটি একটি সিএসএস ক্লাস যা টুলবারের উপাদানগুলো থেকে স্পেস তৈরি করে, এবং বাকি উপাদানগুলোকে টুলবারের একপাশে (ডানদিকে বা বামে) সাজাতে সাহায্য করে।

CSS:

.spacer {
  flex: 1 1 auto;
}

৫. টুলবারের উচ্চতা পরিবর্তন করা

টুলবারের উচ্চতা পরিবর্তন করতে height CSS প্রপার্টি ব্যবহার করা যায়।

<mat-toolbar color="primary" style="height: 80px;">
  <span>My Application</span>
</mat-toolbar>

এখানে, টুলবারের উচ্চতা 80px করা হয়েছে।

MatToolbar কাস্টমাইজেশন

১. স্টাইল কাস্টমাইজেশন

আপনি টুলবারের স্টাইল কাস্টমাইজ করতে CSS বা SCSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, টুলবারের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে:

mat-toolbar {
  background-color: #3f51b5; /* Custom color */
}

২. অ্যানিমেশন এবং ইন্টারঅ্যাকশন

আপনি টুলবারে অ্যানিমেশনও যোগ করতে পারেন। যেমন, স্ক্রলিং এফেক্ট বা অন্য কোনো ইন্টারঅ্যাকশন তৈরি করা:

mat-toolbar {
  transition: all 0.3s ease;
}

mat-toolbar:hover {
  background-color: #ff4081; /* Hover effect */
}

Angular Material এর MatToolbar কম্পোনেন্ট ব্যবহার করে আপনি একটি সুন্দর, রেসপন্সিভ এবং আধুনিক টুলবার তৈরি করতে পারেন, যা আপনার অ্যাপ্লিকেশনের জন্য নিখুঁত নেভিগেশন বা কন্ট্রোল উপাদান সরবরাহ করে। এটি স্টাইল, বাটন, আইকন, এবং নেভিগেশন লিংক ইত্যাদি একত্রিত করতে সক্ষম এবং অ্যাপ্লিকেশন এর ডিজাইন ও ইউজার ইন্টারফেসে একটি প্রফেশনাল লুক যোগ করে।